<template>
    <view class="container">
        <!-- 顶部用户信息和时间 -->
        <view class="header">
            <view class="check-time">检测时间：{{ dateTimeFormat(createTime) }}</view>
        </view>

        <!-- 图片预览区域 -->
        <view class="preview-section">
            <view class="preview-card">
                <image :src="imageUrl" mode="aspectFit" class="preview-image"></image>
                <!-- 扫描动画装饰 -->
                <view class="corner-decoration top-left"></view>
                <view class="corner-decoration top-right"></view>
                <view class="corner-decoration bottom-left"></view>
                <view class="corner-decoration bottom-right"></view>
            </view>
        </view>

        <!-- 诊断结果区域 -->
        <view class="diagnosis-result">
            <view class="result-card">
                <view class="result-header">
                    <text class="result-title">舌诊分析结果</text>
                    <text class="result-subtitle">Traditional Chinese Medicine Analysis</text>
                </view>

                <view class="result-details">
                    <!-- 舌苔质地 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box coating">苔</view>
                            <text class="item-title">苔质</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.coatingQuality.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.coatingQuality.diagnosis }}</text>
                        </view>
                    </view>

                    <!-- 舌苔颜色 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box color">色</view>
                            <text class="item-title">苔色</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.coatingColor.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.coatingColor.diagnosis }}</text>
                        </view>
                    </view>

                    <!-- 舌质颜色 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box body">质</view>
                            <text class="item-title">舌色</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.tongueColor.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.tongueColor.diagnosis }}</text>
                        </view>
                    </view>

                    <!-- 舌神 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box spirit">神</view>
                            <text class="item-title">舌神</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.tongueVitality.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.tongueVitality.diagnosis }}</text>
                        </view>
                    </view>

                    <!-- 舌形状态 -->
                    <view class="detail-item">
                        <view class="item-header">
                            <view class="icon-box shape">形</view>
                            <text class="item-title">舌形</text>
                        </view>
                        <view class="item-content">
                            <text class="feature">{{ diagnosisResult.tongueShape.feature }}</text>
                            <text class="diagnosis">{{ diagnosisResult.tongueShape.diagnosis }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { dateTimeFormat } from '@/utils/system'

const imageUrl = ref('')
const createTime = ref('')
const diagnosisResult = ref(null)

onMounted(() => {
    // 获取由上一个页面传递的数据
    const instance = getCurrentInstance().proxy
    const eventChannel = instance.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
        // 给各个字段赋值
        imageUrl.value = data.imageUrl
        createTime.value = data.createTime
        diagnosisResult.value = {
            coatingQuality: JSON.parse(data.coatingQuality),
            coatingColor: JSON.parse(data.coatingColor),
            tongueColor: JSON.parse(data.tongueColor),
            tongueVitality: JSON.parse(data.tongueVitality),
            tongueShape: JSON.parse(data.tongueShape)
        }
    })
})
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #edf7ed 100%);
    padding: 30rpx;
}

.header {
    margin-bottom: 30rpx;
    
    .check-time {
        font-size: 28rpx;
        color: #666;
        text-align: center;
    }
}

.preview-section {
    margin-bottom: 40rpx;

    .preview-card {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 20rpx;
        padding: 20rpx;
        position: relative;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

        .preview-image {
            width: 100%;
            height: 400rpx;
            border-radius: 10rpx;
        }

        .corner-decoration {
            position: absolute;
            width: 30rpx;
            height: 30rpx;
            border: 4rpx solid #4aaa24;

            &.top-left {
                top: 10rpx;
                left: 10rpx;
                border-right: none;
                border-bottom: none;
            }

            &.top-right {
                top: 10rpx;
                right: 10rpx;
                border-left: none;
                border-bottom: none;
            }

            &.bottom-left {
                bottom: 10rpx;
                left: 10rpx;
                border-right: none;
                border-top: none;
            }

            &.bottom-right {
                bottom: 10rpx;
                right: 10rpx;
                border-left: none;
                border-top: none;
            }
        }
    }
}

// 复用 DiagnosisResult 的结果卡片样式
.diagnosis-result {
    margin-top: 40rpx;
    padding: 0 20rpx;

    .result-card {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 30rpx;
        padding: 40rpx;
        box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);

        .result-header {
            text-align: center;
            margin-bottom: 30rpx;

            .result-title {
                font-size: 40rpx;
                font-weight: 800;
                background: linear-gradient(45deg, #35e5e5, #4aaa24);
                -webkit-background-clip: text;
                color: transparent;
            }

            .result-subtitle {
                font-size: 26rpx;
                color: #666;
                margin-top: 8rpx;
                display: block;
            }
        }

        .result-details {
            .detail-item {
                margin-bottom: 30rpx;

                .item-header {
                    display: flex;
                    align-items: center;
                    margin-bottom: 16rpx;

                    .icon-box {
                        width: 64rpx;
                        height: 64rpx;
                        border-radius: 16rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 36rpx;
                        color: #fff;
                        margin-right: 16rpx;

                        &.coating {
                            background: linear-gradient(135deg, #FF9A9E, #FAD0C4);
                        }

                        &.color {
                            background: linear-gradient(135deg, #A1C4FD, #C2E9FB);
                        }

                        &.body {
                            background: linear-gradient(135deg, #84FAB0, #8FD3F4);
                        }

                        &.shape {
                            background: linear-gradient(135deg, #FFECD2, #FCB69F);
                        }

                        &.spirit {
                            background: linear-gradient(135deg, #B721FF, #21D4FD);
                        }
                    }

                    .item-title {
                        font-size: 34rpx;
                        font-weight: 600;
                        color: #2c3e50;
                    }
                }

                .item-content {
                    margin-left: 84rpx;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: 16rpx;
                    padding: 20rpx;

                    .feature {
                        font-size: 32rpx;
                        color: #34495e;
                        font-weight: 500;
                        display: block;
                        margin-bottom: 8rpx;
                    }

                    .diagnosis {
                        font-size: 30rpx;
                        color: #7f8c8d;
                        line-height: 1.4;
                        margin-top: 10rpx;
                    }
                }
            }
        }
    }
}
</style> 